<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
            padding:20,
            title : {
                text: '今日传感器报警',
                textStyle: {
                  fontSize: 16,
                  fontWeight: "bold",                  
                },
            },
            tooltip: {},
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [74.4, 5, '泄漏检测'],
                    [50.1, 7, '工艺数据'],
                    [89.7, 9, '火灾报警'],
                    [68.1, 15, '气体检测'],
                    [19.6, 3, '环保监测'],
                ]
            },
            grid: {containLabel: true},
            xAxis: {
                name: 'amount',
                axisLabel: {
                    color:"#55DBFF"
                    // color: function (value) {
                    //     return value == '周二' ? 'green' : 'red';
                    // }
                },
                splitLine: {
                    // 显示箭头
                    symbol:['none','arrow'],
                    lineStyle: {
                        // 使用深浅的间隔色
                        color: ['transparent']
                    }
                },
                // 字体颜色
                nameTextStyle: {
                    color: ['transparent']
                },
                axisLine: {
                    lineStyle: {
                        // x轴颜色
                        color: '#0284E4',
                    }
                }
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    color:"#55DBFF"
                    // color: function (value) {
                    //     return value == '周二' ? 'green' : 'red';
                    // }
                },
                splitLine: {
                    // 显示箭头
                    symbol:['none','arrow'],
                    lineStyle: {
                        // 使用深浅的间隔色
                        color: ['transparent']
                    }
                },
                // 字体颜色
                nameTextStyle: {
                    color: ['transparent']
                },
                axisLine: {

                    symbol:['none', 'arrow'],//两端都显示箭头
                    lineStyle: {
                        // x轴颜色
                        color: '#0284E4',
                    }
                }
            },           
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    },
                    // 设置宽度
                    barCategoryGap:'50%',
                    itemStyle: {
                      // 设置背景色
                      // color:"blue"
                      // 设置背景色
                      normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                          offset: 0,
                          color: '#114FCC' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#03FCFE' // 100% 处的颜色
                        }], false),
                      }
                    },
                    

                }
            ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
</body>
</html>